"use client"
import styles from './page.module.scss'
import cx from 'classnames';
import Link from 'next/link'
import Home from '@/app/clients/home/page'
import { useRouter, usePathname } from 'next/navigation';
import { headerNav } from '@/utils/dictionary'
import { useRef, useState } from 'react';
import { addLeaveWord } from '@/api/conversationApi'
import { message } from 'antd';
import dayjs from 'dayjs'


export default function Clinents({ children }: any) {
  const router = useRouter()
  const form: any = useRef({})
  const pathName = usePathname()
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  const [params, setParams] = useState({
    name: '',
    phone: '',
    email: '',
    content: ''
  })
  const changeParams = (e: any) => {
    const { name, value } = e.target
    setParams({
      ...params,
      [name]: value
    })
  }
  return (
    <div className={styles['index']}>
      <header>
        <div className={cx(styles['header'], styles['bancen'])} >
          <div><img src="/imgs/logo.png" alt="" width={50} />&nbsp;绿能芯租</div>
          <div className={styles['personal']} onClick={() => router.push('/clients/personal')}><img src={userInfo.picture ? userInfo.picture : '/imgs/picture.jpg'} alt="" width='50px' height='50px' />&emsp;个人主页</div>
        </div>
        <nav className={cx(styles['nav'], styles['bancen'])}>
          <ul className={styles['bancen']}>
            {headerNav.map((item) => <li key={item.path}><Link href={item.path} className={styles[pathName === item.path ? 'active' : '']}>{item.name}</Link></li>)}
          </ul>
        </nav>
      </header>
      <main className={styles['main']}>
        {children ? children : <Home />}
      </main>
      <footer className={styles['footer']}>
        <div className={cx(styles['section'], styles['bancen'])}>
          <ul>
            <li>产品服务</li>
            <li>极速响应</li>
            <li>上门维保</li>
            <li>原厂保障</li>
            <li>远程护航</li>
            <li>备件速达</li>
            <li>定期巡检</li>
          </ul>
          <ul>
            <li>产品服务</li>
            <li>系统焕新</li>
            <li>技术陪跑</li>
            <li>终身服务</li>
            <li>绿色归还</li>
            <li>一单到底</li>
          </ul>
          <div style={{ width: '1px', display: 'flex', backgroundColor: '#666' }}></div>
          <ul>
            <li>走进我们</li>
            <li>企业简介</li>
            <li>企业文化</li>
            <li>发展历程</li>
          </ul>
          <ul>
            <li>联系我们</li>
            <li>联系方式</li>
            <li>在线留言</li>
          </ul>
          <div style={{ width: '1px', display: 'flex', backgroundColor: '#666' }}></div>
          <div className={styles['word']}>
            <form ref={form}>
              <div>发表您的留言：</div>
              <p>姓名：<input name='name' placeholder='请输入您的姓名' value={params.name} onChange={changeParams} /></p>
              <p>邮箱：<input name='email' placeholder='请输入您的邮箱' value={params.email} onChange={changeParams} /></p>
              <p>电话：<input name='phone' placeholder='请输入您的电话' value={params.phone} onChange={changeParams} /></p>
              <p>内容：<textarea name='content' placeholder='请输入您的内容' value={params.content} onChange={changeParams} /></p>
              <p><button onClick={async (e) => {
                e.preventDefault()
                await addLeaveWord(params)
                console.log('当前时间:', new Date());
                message.success('提交成功')
              }}>提交</button></p>
            </form>
          </div>
        </div>
        <div className={cx(styles['copy'], styles['bancen'])}>&copy;2025-绿能芯租 版权所有</div>
      </footer>
    </div>
  );
}
